<template>
	<view>
		<view class="u-flex user-box u-p-30">
			<view class="u-m-r-10">
				<u-avatar :src="userInfo.avatar || '/static/user1.jpg'" size="100"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{ userInfo.username || '未登录' }}</view>
				<view class="u-font-14 u-tips-color">{{ userInfo.phone || '点击登录账号' }}</view>
			</view>
			<view class="u-m-l-10 u-p-10" @click="goToLogin">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star" title="我的发布" @click="checkLogin"></u-cell-item>
				<u-cell-item icon="photo" title="我的求购" @click="checkLogin"></u-cell-item>
				<u-cell-item icon="heart" title="我的收藏" @click="checkLogin"></u-cell-item>
				<u-cell-item icon="red-packet" title="购买订单" @click="checkLogin"></u-cell-item>
				<u-cell-item icon="order" title="出售订单" @click="checkLogin"></u-cell-item>
				<u-cell-item icon="edit-pen" title="修改密码" @click="checkLogin"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-t-20" v-if="isLogin">
			<u-cell-group>
				<u-cell-item icon="setting" title="退出账号" @click="logoutUser"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { getCurrentUser, logout, isLoggedIn } from '../../common/userStore.js';
	
	// 用户信息
	const userInfo = reactive({
		username: '',
		phone: '',
		avatar: '/static/user1.jpg'
	});
	
	// 是否已登录
	const isLogin = ref(false);
	
	// 获取用户信息
	const getUserInfo = () => {
		const user = getCurrentUser();
		if (user) {
			userInfo.username = user.username;
			userInfo.phone = user.phone;
			userInfo.avatar = user.avatar || '/static/user1.jpg';
			isLogin.value = true;
		} else {
			userInfo.username = '未登录';
			userInfo.phone = '点击登录账号';
			userInfo.avatar = '/static/user1.jpg';
			isLogin.value = false;
		}
	};
	
	// 跳转到登录页
	const goToLogin = () => {
		if (!isLogin.value) {
			uni.navigateTo({
				url: '../login/login'
			});
		}
	};
	
	// 检查登录状态
	const checkLogin = () => {
		if (!isLogin.value) {
			uni.showToast({
				title: '请先登录',
				icon: 'none',
				duration: 2000
			});
			
			setTimeout(() => {
				uni.navigateTo({
					url: '../login/login'
				});
			}, 1000);
			
			return false;
		}
		return true;
	};
	
	// 退出登录
	const logoutUser = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: function(res) {
				if (res.confirm) {
					logout();
					getUserInfo();
					uni.showToast({
						title: '已退出登录',
						icon: 'success',
						duration: 1500
					});
				}
			}
		});
	};
	
	// 页面加载时获取用户信息
	onMounted(() => {
		getUserInfo();
	});
	
	// 每次显示页面时刷新用户信息
	onShow(() => {
		getUserInfo();
	});
</script>

<style lang="scss">
	page{
		background-color: #ededed;
	}
	.camera{
		width: 54px;
		height: 44px;
		
		&:active{
			background-color: #ededed;
		}
	}
	.user-box{
		background-color: #fff;
	}
</style>

